<!DOCTYPE html>
<html>

<head>
    <title>配置管理</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/static/js/vue.global.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: all 0.2s ease;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #2c3e50;
            background: linear-gradient(270deg, #f0f4f9 0%, #e3eaf3 100%);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            min-height: calc(100vh - 120px);
        }

        /* 固定标题栏 */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            background: linear-gradient(270deg, #51915f 0%, #3d6d47 100%);
            color: white;
            padding: 1rem;
            box-shadow: 0 5px 8px 8px rgba(0, 0, 0, 0.1);
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 1rem;
        }

        .title {
            font-size: 1.5rem;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0;
        }

        .header-actions {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        /* 按钮样式 */
        .header-button {
            padding: 0.625rem 1.25rem;
            background: transparent;
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .header-button:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.6);
            transform: translateY(-1px);
        }

        .save-button {
            padding: 0.625rem 1.5rem;
            background: rgba(255, 255, 255, 0.95);
            color: #51915f;
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.2s ease;
            font-size: 0.95rem;
        }

        .save-button:hover {
            background: white;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* 消息提示 */
        .message-container {
            position: fixed;
            top: 5rem;
            left: 0;
            right: 0;
            z-index: 2000;
            display: flex;
            justify-content: center;
            padding: 0.5rem;
            pointer-events: none;
        }

        .message {
            padding: 1rem 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            pointer-events: auto;
            max-width: 90%;
            width: 500px;
            text-align: center;
            animation: slideDown 0.3s ease-out;
            margin: 0 1rem;
            backdrop-filter: blur(8px);
        }

        @keyframes slideDown {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .success {
            background: rgba(81, 145, 95, 0.95);
            color: white;
            border: 1px solid rgba(81, 145, 95, 0.2);
        }

        .error {
            background: rgba(231, 76, 60, 0.95);
            color: white;
            border: 1px solid rgba(231, 76, 60, 0.2);
        }

        /* 主内容区域 */
        .main-content {
            max-width: 1200px;
            margin: 6rem auto 2rem;
            padding: 0 1rem;
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* 配置区域 */
        .config-section {
            background: rgba(255, 255, 255, 0.95);
            margin-bottom: 1.5rem;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.8);
            transition: all 0.2s ease;
        }

        .config-section:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        }

        .config-section h2 {
            color: #51915f;
            font-size: 1.25rem;
            margin-bottom: 1.25rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid rgba(81, 145, 95, 0.1);
            font-weight: 500;
        }

        .config-section h3 {
            color: #51915f;
            font-size: 1.1rem;
            margin: 1.25rem 0 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(81, 145, 95, 0.1);
            font-weight: 500;
        }

        .config-item {
            margin: 2rem 0;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            /* gap: 1rem; */
        }

        .config-item label {
            width: 200px;
            color: #2c3e50;
            font-weight: 500;
            font-size: 0.95rem;
        }

        .config-item input {
            flex: 1;
            min-width: 200px;
            max-width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid #dde4e9;
            border-radius: 8px;
            font-size: 0.95rem;
            color: #2c3e50;
            background: rgba(255, 255, 255, 0.9);
            transition: all 0.2s ease;
        }

        .config-item input:focus {
            outline: none;
            border-color: #51915f;
            background: white;
            box-shadow: 0 0 0 3px rgba(81, 145, 95, 0.1);
        }

        .comment {
            width: 100%;
            margin-top: 0.5rem;
            margin-left: 200px;
            color: #666;
            font-size: 0.85rem;
            padding-left: 0.25rem;
            line-height: 1.4;
        }

        /* 模态框样式 */
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            animation: fadeIn 0.2s ease-out;
            backdrop-filter: blur(4px);
        }

        .modal {
            background: rgba(255, 255, 255, 0.95);
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
            width: 100%;
            max-width: 420px;
            margin: 1rem;
            animation: modalSlideUp 0.3s ease-out;
            border: 1px solid rgba(255, 255, 255, 0.8);
        }

        @keyframes modalSlideUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .modal h2 {
            color: #2c3e50;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            text-align: center;
            font-weight: 500;
        }

        .modal .form-group {
            margin-bottom: 1.25rem;
        }

        .modal label {
            display: block;
            margin-bottom: 0.5rem;
            color: #546e7a;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .modal input {
            width: 100%;
            padding: 0.875rem 1rem;
            border: 1px solid #dde4e9;
            border-radius: 8px;
            font-size: 1rem;
            color: #2c3e50;
            background: white;
            transition: all 0.2s ease;
        }

        .modal input:focus {
            outline: none;
            border-color: #51915f;
            box-shadow: 0 0 0 3px rgba(81, 145, 95, 0.1);
        }

        .modal-buttons {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
            justify-content: flex-end;
        }

        .modal-button {
            padding: 0.75rem 1.75rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 500;
            border: none;
            transition: all 0.2s ease;
        }

        .modal-button.primary {
            background: linear-gradient(135deg, #51915f 0%, #3d6d47 100%);
            color: white;
        }

        .modal-button.primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(81, 145, 95, 0.2);
        }

        .modal-button.secondary {
            background: #f0f4f9;
            color: #2c3e50;
        }

        .modal-button.secondary:hover {
            background: #e3eaf3;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .header {
                padding: 0.75rem 0;
            }

            .header-content {
                padding: 0 1rem;
            }

            .title {
                font-size: 1.25rem;
            }

            .header-actions {
                gap: 0.5rem;
            }

            .header-button,
            .save-button {
                padding: 0.5rem 0.75rem;
                font-size: 0.85rem;
            }

            .main-content {
                margin-top: 5rem;
                padding: 0 0.75rem;
            }

            .config-section {
                padding: 1rem;
            }

            .config-item {
                flex-direction: column;
                gap: 0.5rem;
            }

            .config-item label {
                width: 100%;
            }

            .config-item input {
                width: 100%;
                font-size: 16px;
            }

            .comment {
                margin-left: 0;
                padding-left: 0;
            }

            .message {
                padding: 0.75rem 1rem;
                font-size: 0.9rem;
            }

            .modal {
                margin: 1rem;
                padding: 1.5rem;
            }

            .modal-button {
                padding: 0.75rem 1rem;
            }
        }

        /* 针对超小屏幕的额外优化 */
        @media (max-width: 380px) {
            .title {
                font-size: 1.1rem;
            }

            .header-button,
            .save-button {
                padding: 0.5rem;
                font-size: 0.8rem;
            }

            .config-section h2 {
                font-size: 1.1rem;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="header">
            <div class="header-content">
                <h1 class="title">配置管理</h1>
                <div class="header-actions">
                    <a href="/services" class="header-button">服务管理</a>
                    <!-- <button @click="showChangePasswordModal" class="header-button">修改密码</button> -->
                    <!-- <button @click="logout" class="header-button">退出登录</button> -->
                    <button @click="saveConfig" class="save-button">保存配置</button>
                </div>
            </div>
        </header>

        <div class="message-container" v-show="message">
            <div :class="['message', messageType]">
                {{ message }}
            </div>
        </div>

        <main class="main-content">
            <div v-for="(section, sectionName) in config" :key="sectionName" class="config-section">
                <h2>{{ sectionName }}</h2>
                <template v-if="typeof section === 'object'">
                    <!-- 嵌套配置节 -->
                    <template v-if="section.SysOrg || section.Jielong">
                        <div v-for="(subsection, subsectionName) in section" :key="subsectionName"
                            class="config-section">
                            <h3>{{ subsectionName }}</h3>
                            <div v-for="(value, key) in subsection" :key="key" class="config-item">
                                <label :for="sectionName + '-' + subsectionName + '-' + key">{{ key }}:</label>
                                <input :id="sectionName + '-' + subsectionName + '-' + key"
                                    v-model="config[sectionName][subsectionName][key]"
                                    :type="getInputType(sectionName, key, subsectionName)">
                                <div class="comment" v-if="comments[sectionName]?.[subsectionName]?.[key]">
                                    {{ comments[sectionName][subsectionName][key] }}
                                </div>
                            </div>
                        </div>
                    </template>
                    <!-- 普通配置节 -->
                    <template v-else>
                        <div v-for="(value, key) in section" :key="key" class="config-item">
                            <label :for="sectionName + '-' + key">{{ key }}:</label>
                            <input :id="sectionName + '-' + key" v-model="config[sectionName][key]"
                                :type="getInputType(sectionName, key)">
                            <div class="comment" v-if="comments[sectionName]?.[key]">
                                {{ comments[sectionName][key] }}
                            </div>
                        </div>
                    </template>
                </template>
            </div>
        </main>

        <!-- 密码修改模态框 -->
        <div v-if="showPasswordModal" class="modal-backdrop" @click="showPasswordModal = false">
            <div class="modal" @click.stop>
                <h2>修改密码</h2>
                <div class="form-group">
                    <label for="oldPassword">原密码</label>
                    <input type="password" id="oldPassword" v-model="passwordForm.oldPassword" required>
                </div>
                <div class="form-group">
                    <label for="newPassword">新密码</label>
                    <input type="password" id="newPassword" v-model="passwordForm.newPassword" required>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认新密码</label>
                    <input type="password" id="confirmPassword" v-model="passwordForm.confirmPassword" required>
                </div>
                <div class="modal-buttons">
                    <button class="modal-button secondary" @click="showPasswordModal = false">取消</button>
                    <button class="modal-button primary" @click="changePassword">确认修改</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    config: {},
                    comments: {},
                    message: '',
                    messageType: 'success',
                    showPasswordModal: false,
                    passwordForm: {
                        oldPassword: '',
                        newPassword: '',
                        confirmPassword: ''
                    }
                }
            },
            computed: {
                getInputType() {
                    return (sectionName, key, subsectionName = null) => {
                        // 检查是否是密码或密钥字段
                        if (key.toLowerCase().includes('password') || key.toLowerCase().includes('authkey')) {
                            return 'password';
                        }
                        // 检查 config[sectionName][key] 是否为数字
                        if (typeof this.config[sectionName][key] === 'number') {
                            return 'number';
                        }
                        if (subsectionName) {
                            // 检查 config[sectionName][subsectionName][key] 是否为数字
                            if (this.config[sectionName][subsectionName][key] && typeof this.config[sectionName][subsectionName][key] === 'number') {
                                return 'number';
                            }
                        }
                        return 'text';
                    };
                }
            },
            methods: {
                async loadConfig() {
                    try {
                        const response = await fetch('/api/config');
                        const data = await response.json();
                        this.config = data.config;
                        this.comments = data.comments;
                        console.log('注释数据:', this.comments);
                    } catch (error) {
                        this.showError('加载配置失败：' + error.message);
                    }
                },
                async saveConfig() {
                    try {
                        const response = await fetch('/api/config', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify(this.config)
                        });
                        const data = await response.json();
                        if (response.ok) {
                            this.showSuccess('配置保存成功');
                        } else {
                            this.showError(data.error || '保存失败');
                        }
                    } catch (error) {
                        this.showError('保存配置失败：' + error.message);
                    }
                },
                showSuccess(msg) {
                    this.message = msg;
                    this.messageType = 'success';
                    setTimeout(() => {
                        this.message = '';
                    }, 3000);
                },
                showError(msg) {
                    this.message = msg;
                    this.messageType = 'error';
                    setTimeout(() => {
                        this.message = '';
                    }, 5000);
                },
                showChangePasswordModal() {
                    this.showPasswordModal = true;
                    this.passwordForm = {
                        oldPassword: '',
                        newPassword: '',
                        confirmPassword: ''
                    };
                },

                async changePassword() {
                    if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
                        this.showError('两次输入的新密码不一致');
                        return;
                    }

                    try {
                        const response = await fetch('/api/change-password', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                oldPassword: this.passwordForm.oldPassword,
                                newPassword: this.passwordForm.newPassword
                            })
                        });

                        const data = await response.json();
                        if (response.ok) {
                            this.showSuccess('密码修改成功');
                            this.showPasswordModal = false;
                        } else {
                            this.showError(data.error || '修改失败');
                        }
                    } catch (error) {
                        this.showError('修改密码失败：' + error.message);
                    }
                },

                async logout() {
                    try {
                        const response = await fetch('/logout', {
                            method: 'POST'
                        });

                        if (response.ok) {
                            window.location.href = '/login';
                        }
                    } catch (error) {
                        this.showError('登出失败：' + error.message);
                    }
                }
            },
            mounted() {
                this.loadConfig();
            }
        }).mount('#app');
    </script>
</body>

</html>